<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div :id="code" :style="'width: 100%;height: ' + height + ';'" />
  </el-card>
</template>

<script>
import theme from '@/components/ik/echarts/theme/ik.json'
import { dimensionExtraction, initTimeSeries } from '@/components/ik/echarts/dataProcess'
import * as echarts from 'echarts'

export default {
  name: 'IkScatterTimeChart',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    code: {
      type: String,
      default: 'bar.base'
    },
    gridType: {
      type: String,
      default: 'summary'
    },
    data: {
      type: Array,
      default: function() {
        return [
          { 'type': '类型6', 'time': '2020-01-23 09:07:53', 'value': '39' },
          { 'type': '类型4', 'time': '2020-02-21 16:02:38', 'value': '30' },
          { 'type': '类型4', 'time': '2021-04-22 07:04:22', 'value': '35' },
          { 'type': '类型4', 'time': '2021-09-22 12:06:15', 'value': '37' },
          { 'type': '类型1', 'time': '2021-03-21 14:09:47', 'value': '30' },
          { 'type': '类型6', 'time': '2022-10-23 04:08:39', 'value': '35' },
          { 'type': '类型6', 'time': '2022-11-22 19:02:37', 'value': '30' },
          { 'type': '类型1', 'time': '2021-04-21 08:05:27', 'value': '30' },
          { 'type': '类型1', 'time': '2021-03-21 12:07:51', 'value': '30' },
          { 'type': '类型6', 'time': '2021-03-23 09:07:53', 'value': '39' },
          { 'type': '类型4', 'time': '2021-05-21 16:02:38', 'value': '30' },
          { 'type': '类型4', 'time': '2021-07-22 07:04:22', 'value': '35' },
          { 'type': '类型4', 'time': '2021-08-22 12:06:15', 'value': '37' },
          { 'type': '类型1', 'time': '2024-11-21 14:09:47', 'value': '30' },
          { 'type': '类型6', 'time': '2024-12-23 04:08:39', 'value': '35' },
          { 'type': '类型6', 'time': '2024-09-22 19:02:37', 'value': '30' },
          { 'type': '类型1', 'time': '2023-04-21 08:05:27', 'value': '30' },
          { 'type': '类型1', 'time': '2023-05-21 12:07:51', 'value': '30' },
          { 'type': '类型7', 'time': '2023-05-23 16:00:51', 'value': '39' }
        ]
      }
    },
    // 时间维度
    timeDimensionField: {
      type: String,
      default: 'time'
    },
    timeDimensionFormat: {
      type: String,
      default: 'yyyy-MM-dd hh:mm:ss'
    },
    timeDimensionStart: {
      type: String,
      default: '2020-01-01 00:00:00'
    },
    timeDimensionStop: {
      type: String,
      default: '2025-01-01 00:00:00'
    },
    timeDimensionInterval: {
      type: String,
      default: '1'
    },
    timeDimensionUom: {
      // year - 年，month - 月，week - 周，day - 日，hour - 时，minute - 分，second - 秒
      type: String,
      default: 'month'
    },
    timeDimensionStep: {
      // 步进位置：start/stop/middle
      type: String,
      default: 'middle'
    },
    // 数据分析维度 - 第二数据维度
    dataDimensionField: {
      type: String,
      default: 'value'
    },
    dataDimensionMin: {
      type: String,
      default: '0'
    },
    dataDimensionMax: {
      type: String,
      default: ''
    },
    dataDimensionInterval: {
      type: String,
      default: ''
    },
    dataDimensionUom: {
      type: String,
      default: ''
    },
    // 数据分析维度 - 分析维度 - 图例
    analysisDimensionField: {
      type: String,
      default: 'type'
    },
    analysisDimension: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 样式
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chartAnalysisDimension: [],
      chartSeries: []
    }
  },
  mounted() {
    const $this = this
    // 初始化 chart 样式
    // 基于准备好的dom，初始化echarts实例
    const dom = document.getElementById($this.code)
    echarts.registerTheme('ik', theme)
    // 初始化组件，配合主题 - 'dark'
    const myChart = echarts.init(dom, 'ik')
    // 如果分析维度不存在，通过字段抽取
    if ($this.analysisDimension.length === 0) {
      // 第一维度必需
      if ($this.analysisDimensionField === '') {
        console.log('')
      }
      $this.chartAnalysisDimension = dimensionExtraction($this.data, $this.analysisDimensionField)
    } else {
      $this.chartAnalysisDimension = $this.analysisDimension
    }

    // 生成 series
    const series = initTimeSeries($this.data, $this.chartAnalysisDimension, $this.analysisDimensionField,
      $this.timeDimensionField, $this.timeDimensionFormat, $this.timeDimensionStart, $this.timeDimensionStop, $this.timeDimensionInterval, $this.timeDimensionUom,
      $this.timeDimensionStep, $this.dataDimensionField, $this.gridType, {})
    // 生成数据轴数据
    const axis = {}
    if ($this.dataDimensionMin !== '') {
      axis['min'] = Number($this.dataDimensionMin)
    }
    if ($this.dataDimensionMax !== '') {
      axis['max'] = Number($this.dataDimensionMax)
    }
    if ($this.dataDimensionInterval !== '') {
      axis['interval'] = Number($this.dataDimensionInterval)
    }
    if ($this.dataDimensionUom !== '') {
      console.log('')
    }

    //
    const chartSeries = []
    for (const key in series) {
      chartSeries.push(
        {
          name: key,
          type: 'scatter',
          smooth: true,
          showBackground: true,
          data: series[key]
        }
      )
    }

    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: $this.chartAnalysisDimension
      },
      xAxis: {
        type: 'time'
      },
      dataZoom: [{
        type: 'inside',
        start: 0,
        end: 40
      }, {
        start: 0,
        end: 30
      }],
      yAxis: axis,
      series: chartSeries
    })
  },
  methods: {
    // 切换密码显示
  }
}
</script>

